<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{/layout/_easyui_Content}" xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      xmlns:hhm="http://www.w3.org/1999/xhtml">
<head>
    <title>[[${tableTitle}]]列表</title>
    <!--移动到图片，图片会动一下-->
    <style type="text/css">

        img {
            cursor: pointer;
            transition: all 0.6s;
        }

        img:hover {
            transform: scale(1.2);
        }
    </style>
</head>
<body>
<scction layout:fragment="Head">
    <link rel="stylesheet" th:href="@{/plugins/layui/css/layui.css}">
    <script th:src="@{/plugins/layui/layui.js}"></script>
</scction>
<section layout:fragment="content">
    <!-- 栏目 -->
    <div th:title="${tableTitle} + '栏目'" data-options="region:'west',border:true,split:true,collapsed:true"
         style="width:180px;">
        <ul id="tree"></ul>
    </div>

    <!-- 列表 -->
    <div data-options="region:'center',border:false">
        <div id="grid-list" th:title="${tableTitle} + '列表'" data-options="toolbar:'#tb',border:true"></div>
    </div>

    <div id="tb" class="tb" style="height: auto">
        <div id="tabs" class="easyui-tabs menu-tabs" data-options="border:false">
            <div th:each="item,itemStat:${T(com.kevis.webCommon.tools.ui.SelectItem).GetSelectListItem(T(com.kevis.webCommon.tools.ui.Dictionary).IsStatus,null,null)}"
                 th:title="${item.getText()}" th:id="${item.getValue()}"></div>
            <div title="全部" id="9999"></div>
        </div>

        <div class="toolbar">
            <ul>
                <li>
                    筛选：
                    <select class="easyui-combobox w120" id="SearchTimeType">
                        <option value="0">※ 发布时间</option>
                        <option value="1">※ 创建时间</option>
                        <option value="2">※ 更新时间</option>
                    </select>
                    <input class="easyui-datebox w120" id="SearchTimeBegin" editable="false" prompt="- 开始时间 -"
                           value=""/>
                    -
                    <input class="easyui-datebox w120" id="SearchTimeEnd" editable="false" prompt="- 结束时间 -" value=""/>
                </li>
<!--                <li>-->
<!--                    <select class="easyui-combobox w120" id="SearchMark">-->
<!--                        <option value="9999">-=标识=-</option>-->
<!--                        <option value="100">移动端</option>-->
<!--                    </select>-->
<!--                </li>-->
            </ul>
            <div class="search">

                <text>
                    <input type="hidden" name="SearchClassID" id="SearchClassID" value=""/>
                    <input type="hidden" name="SearchMarkStatus" id="SearchMarkStatus" value="0"/>
                    <input type="hidden" name="SearchKey" id="SearchKey" value=""/>
                    <input type="hidden" name="SearchName" id="SearchName" value=""/>
                    <input class="easyui-searchbox" data-options="prompt:'关键字',searcher:doSearch,menu:'#mm'"
                           id="SearchBox" style="width:280px"/>
                    <div id="mm">
                        <div data-options="name:'Id'">ID</div>
                        <div data-options="name:'GUID'">GUID</div>
                        <div data-options="name:'Title'">标题</div>
                        <div data-options="name:'Source'">来源</div>
                        <div data-options="name:'Author'">编辑</div>
                        <div data-options="name:'CreateUser'">创建人</div>
                        <div data-options="name:'UpdateUser'">更新人</div>
                    </div>
                </text>

                <a href="javascript:void(0);" class="easyui-linkbutton" iconcls="icon-clear" plain="true"
                   onclick="doClearSearch();">清空</a>
            </div>
            <div class="button">
                <ul>
                    <li>
                        <hhm:roleAction th:attr="actionGuid=${ActionGUID}" actionName="add"></hhm:roleAction>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div id="form-window" title="操作窗口" data-options="modal:true,closed:true,fit:false"
         style="width:100%;height:100%;"></div>
    <!--    <script th:inline="javascript" type="text/javascript">-->
    <!--        [# sec:authorize = "hasPermission(#vars.ActionGUID,'Info_Update')"]-->
    <!--        console.log('1111');-->
    <!--        [/]-->
    <!--    </script>-->

</section>
<section layout:fragment="Toolbar">

</section>
<scction layout:fragment="JavaScript">
    <script type="text/javascript">
        let listUrl = '[(${@htmlHelper.actionGuid("list")})]';
        let addUrl = '[(${@htmlHelper.actionGuid("add")})]';
        let editUrl = '[(${@htmlHelper.actionGuid("edit")})]';
        let actionEnableUrl = '[(${@htmlHelper.actionGuid("enable")})]';
        let leftTreeUrl = '[(${@htmlHelper.actionGuid("tree")})]';
    </script>
    <script type="text/javascript" th:inline="none">
        $(function () {
            // 初始化-标签页
            var tabs = $('#tabs').tabs({
                onSelect: function (title, index) {
                    $("#SearchMarkStatus").val(tabs.tabs('getSelected').panel('options').id);
                    btnSearch();
                }
            });

            // 初始化-批量操作窗口
            arraylistWin = $('#arraylist-window').window({
                iconCls: 'icon-redo',
                closed: true,
                modal: false
            });

            //MvcClassID=1038;
            // 初始化-分类树
            tree = $('#tree').tree({
                checkbox: false,
                method: 'get',
                //async:false,//默认就是异步,设置不了同步
                //url: contextPath + '/VIVI_HY_ADMIN/' + TableName + '/GetTreeAjax.html?TableName=' + TableName + "&ParentID=" + MvcClassID + "&isRoot=true&IsAllStatus=false",
                url: ctreatLeftTreeLink(createLink(leftTreeUrl), TableName),
                onClick: function (node) {
                    clickTree(node.id);
                },
                formatter: function (node) {
                    var s = '<span title=\'' + node.id + '\'> ' + node.text + '</span>';
                    if (node.count > 0) {
                        s += '&nbsp;(<span style=\'color:blue\'>' + node.count + '</span>)';
                    }
                    return s;
                }
            });

            // 初始化 - 列表
            loadData(queryParams());
        });
        var grid = null;

        // 信息列表
        function loadData(params) {
            grid = $('#grid-list').datagrid({
                width: function () {
                    return document.body.clientWidth * 0.9
                },
                loadMsg: "数据加载中，请稍候……",
                //url: createLink(ActionGUID),
                url: createLink(listUrl),
                striped: true,//显示斑马线效果
                pagination: true, //分页控件
                pageSize: 10,
                pageList: [10, 25, 50, 100],
                pagePosition: 'bottom',//分页工具栏的位置
                rownumbers: true, //行号
                fit: true, //自动大小
                checkOnSelect: true,//选中复选框关联
                singleSelect: false,//只能选中一行
                showFooter: true,
                queryParams: params,
                idField: 'id',//设置主键列
                //冻结列
                frozenColumns: [[
                    {field: 'ck', checkbox: true, width: 40}
                    , {field: 'id', title: 'Id', width: 60, align: 'center', sortable: true}
                ]],
                //滚动列
                columns: [[
                 {
                        field: 'title',
                        title: '标题',
                        width: 360,
                        align: 'left',
                        formatter: function (value, row, index) {

                            return value;
                        }
                    }
                    , {field: 'numClick', title: '查看', width: 60, align: 'center'}
                    , {
                        field: 'classId',
                        title: '所属栏目',
                        width: 100,
                        align: 'center',
                        sortable: true,
                        formatter: function (value, row, index) {
                            return "<b style='color:#f00;' title='" + row.classId + "'>" + row.classId + "</b>";
                        }
                    }
                    , {field: 'sort', title: '排序', width: 50, align: 'center'}
                    , {field: 'articlesPart', title: '来源', width: 66, align: 'center', hidden: true}
                    , {field: 'author', title: '作者', width: 66, align: 'center', hidden: true}
                    , {
                        field: 'status',
                        title: '状态',
                        width: 66,
                        align: 'center',
                        sortable: true,
                        formatter: function (value, row, index) {
                            switch (value) {
                                case 0:
                                    return "<font style='color:green;font-weight:bold;'>正常</font>";
                                case 10:
                                    return "锁定";
                                case 20:
                                    return "待审核";
                                case 50:
                                    return "未通过";
                                case 30:
                                    return "过期";
                                case 30:
                                    return "停用";
                                case -1:
                                    return "<font style='color:red;font-weight:bold;'>删除</font>";
                                default:
                                    return "其他";
                            }
                        }
                    }
                    , {
                        field: 'releaseTime',
                        title: '发布时间',
                        width: 140,
                        align: 'center',
                        sortable: true,
                        formatter: function (value, row, index) {
                            var now = new Date();
                            var time = FormatTime(value, "yyyy-MM-dd hh:mm");
                            var adddate = new Date(time);
                            return adddate > now ? "<span style=\"color:#F00\">" + time + "</span>" : time;
                        }
                    }

                    , {field: 'LINE', title: '', width: 16, align: 'center'}
                    , {
                        field: 'updateTime',
                        title: '更新时间',
                        width: 150,
                        align: 'center',
                        sortable: true,
                        formatter: function (value, row, index) {
                            return FormatTime(value, "yyyy-MM-dd hh:mm:ss");
                        }
                    }
                    , {
                        field: 'createTime',
                        title: '创建时间',
                        width: 150,
                        align: 'center',
                        sortable: true,
                        formatter: function (value, row, index) {
                            return FormatTime(value, "yyyy-MM-dd hh:mm:ss");
                        }
                    }
                ]],
                onLoadSuccess: function (data) {
                    setTimeout(function () {

                        // grid.datagrid('fixDetailRowHeight');
                        // grid.datagrid("clearSelections");
                        // bindFancybox();
                    }, 0);
                },
                //双击操作
                onDblClickRow: function (rowIndex, rowData) {
                    var rowid = rowData.Id;
                    update(rowid);
                },
                //失败操作
                onLoadError: function () {
                    // msgShow("操作失败", "发生错误,获取列表失败！", "error");
                }
            });

            // 分页样式
            grid.datagrid('getPager').pagination({
                showPageList: true,
                showRefresh: true,
                beforePageText: "第",
                afterPageText: "页 ，共 <span class=\"red\">{pages}</span> 页",
                displayMsg: '当前 <span class=\"red\">{from}</span> 到 <span class=\"red\">{to}</span> 条，总 <span class=\"red\">{total}</span> 条，耗时 P <span class=\"red\">)</span>，D <span class=\"red\" id=\"timeOut\"></span> (<span class=\"red\" id=\"timeOut_db\"></span> <span class=\"red\" id=\"timeOut_sw\"></span> <span class=\"red\" id=\"timeOut_web\"></span>)'
            });
            $('body').layout();

        }

        //参数
        function queryParams() {
            let queryParams1 = {
                SearchClassID: $("#SearchClassID").val(),
                // SearchRecommendID: $("#SearchRecommendID").combobox('getValue'),
                SearchTimeType: $("#SearchTimeType").combobox('getValue'),
                SearchTimeBegin: $("#SearchTimeBegin").datebox('getValue'),
                SearchTimeEnd: $("#SearchTimeEnd").datebox('getValue'),
                SearchMarkStatus: $("#SearchMarkStatus").val(),
                // SearchMark: $("#SearchMark").combobox('getValue'),
                // //SearchAreaID: $("#SearchAreaID").combotree('getValue'),
                // SearchAreaID: $('#F_CityID').val(),
                SearchName: $('#SearchBox').searchbox('getName'),
                SearchKey: $('#SearchBox').searchbox('getValue')
            };
            return queryParams1;
        }

        // 搜索
        function doSearch(value, name) {
            btnSearch();
        }

        function btnSearch() {
            grid.datagrid('load', queryParams());
        }

        // 清空
        function doClearSearch() {
            $("#SearchTimeBegin").datebox('setValue', '');
            $("#SearchTimeEnd").datebox('setValue', '');
            $("#SearchBox").searchbox('setValue', '');
            $('#SearchMark').combobox('setValue', 9999);
            $("#SearchRecommendID").combotree('setValue', 0);
            $('#SearchAreaID_province').val(1);
            $('#SearchAreaID_city').empty().append('<option value="0"> -- 全国 -- </option>');
            $('#F_ProvinceID').val(1);
            $('#F_CityID,#F_AreaID').val(0);
        }

        // 获得选中列表个数
        function getSelectedArr(id) {
            var ids = [];
            var rows = grid.datagrid('getSelections');
            if (id == 0) {
                for (var i = 0; i < rows.length; i++) {
                    ids.push(rows[i].Id);
                }
            } else {
                ids.push(id);
            }
            return ids;
        }

        // 重置
        function resetGrid() {
            grid.treegrid('clearSelections');
            $("input[type='checkbox']").eq(0).attr("checked", false);
        }

        // 关闭编辑窗口
        function closeWin() {
            if (arraylistWin != null) {
                arraylistWin.dialog('close');
            }
            if (dialogWin != null) {
                dialogWin.dialog('close');
            }
        }

        // 刷新列表并回到首页
        function close() {
            resetGrid();
            closeWin();
            grid.datagrid('load');
        }

        // 取消
        function cancel() {
            closeWin();
        }

        // 刷新列表
        function refreshGrid() {
            resetGrid();
            closeWin();
            grid.datagrid('reload');
        }

        // 菜单树触发
        function clickTree(nodeid) {
            $("#SearchClassID").val(nodeid);
            btnSearch();
        }

        // 添加
        function add(actionId) {
            dialogWin = openWindow("#form-window", " 添加 ", createLink(addUrl) + "&SearchClassID=" + $("#SearchClassID").val(), "icon-add").dialog('open');
        }

        // 编辑
        function edit(actionId, rowId) {
            if (rowId == undefined) {
                var idArray = getSelectedArr(0);
            } else {
                var idArray = getSelectedArr(rowId);
            }
            if (idArray.length == 1) {
                dialogWin = openWindow("#form-window", " 修改 ID:" + idArray[0], createLink(actionId) + "&InfoID=" + idArray[0], "icon-add").dialog('open');
            } else {
                msgShow('提示', '请至少且只能选择一条记录进行操作!', 'info');
            }
            return;
        }
    </script>

    <script type="text/javascript">
        var ActionGUID = '[[${ActionGUID}]]';

        function update(rowid) {
            [(${@htmlHelper.linkJavaScript("Info_Update")})]
        }

    </script>
</scction>
</body>
</html>